<!-- 商城启动页 -->
<template>
	<view class="index-box">
		<nav-bar type="fixed" :backState="2000" :bgColor="['#2ba4f7', '#8bd8fe']" :titleCenter="false" title="Open-Mall">
			<view class="Title">M家购</view>
			<navigator class="search_box u-f-ac" hover-class="none" url="../common/search/search">
				<text class="iconR iconfont icon-sousuo"></text>
				<text class="prompt">搜索</text>
			</navigator>
		</nav-bar>
		<view class="nav-tab">
			<view class="top u-f-jsb">
				<view v-for="i in navList">
					<text class="icon iconfont" :class="i.icon"></text>
					{{i.name}}
				</view>
			</view>
			<view class="choose-post u-f-jsb">
				<navigator hover-class="none" url="../common/postStation/postStation" class="text-cut">
					<text class="icon iconfont icon-dianpu1 text-white padding-right-xs"></text>
					自提点：OM自营店
					<text class="icon iconfont icon-right text-white"></text>
				</navigator>
				<button class="pro-button" open-type="share">
					<text class="icon iconfont icon-fenxiang1 "></text>
					分享
				</button>
			</view>
			<!-- 轮播图 -->
			<swiper
				:indicator-dots="true"
				:autoplay="true"
				:interval="5000"
				:duration="150"
				class="tui-banner-swiper square-dot"
				:circular="true"
				indicator-color="rgba(255, 255, 255, 0.8)"
				indicator-active-color="#2ba4f7"
			>
				<swiper-item v-for="(item, index) in 3" >
					<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010aa3570afd6a32f8751b3f804a6f.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620965917&t=3fcb52e43f8141528d174fe12bbb645a" class="tui-slide-image" mode="scaleToFill" />
				</swiper-item>
			</swiper>
			
		</view>
		<!-- 滑动菜单 -->
		<view class="unicorn-header2">
			<swiper
				class="screen-swiper2 square-dot"
				indicator-color="#f22222"
				indicator-active-color="#f22222"
				:indicator-dots="true"
				:circular="false"
				:autoplay="false"
				interval="5000"
				duration="500"
				style="background: transparent !important;"
			>
				<swiper-item style="background: transparent !important;" >
					<view class="menu">
						<block v-for="(item, index) in tab" :key="item.id">
							<view class="menu-in">
								<image :src="'https://zj.gdwrh.com/fnyg/static/index/' + item.img" class="menu-img" mode="scaleToFill"></image>
								<view class="menu-name text-cut">{{ item.name }}</view>
							</view>
						</block>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 秒杀商品 -->
		<view class="bg-white seckill-box">
			<view class="u-f-jsb margin-bottom">
				<view class="u-f-ajc text-lg text-bold u-f-ac ">
					<text class="icon iconfont icon-huo text-red"></text>
					<view class="padding-left-xs">限时秒杀</view>
				</view>
				<navigator hover-class="none" url="../home/seckill/seckill" class="text-gray">点击查看更多<text class="icon iconfont icon-fanhui-right"></text></navigator>
			</view>
			<scroll-view scroll-x class="scroll-box" scroll-with-animation @scrolltolower="getMore">
				<view class="seckill-item" v-for="item in 12">
					<image src="../../static/goods/4.jpg" mode="heightFix"></image>
					<view class="text-cut">精选菠萝55包邮</view>
					<view class="u-f price">
						<view class="text-red text-bold text-lg">
							<text class="text-sm">￥</text>
							55
						</view>
						<view class="text-gray text-sm text-del">￥66</view>
					</view>
					<view style="margin-top: 10rpx;">
						<view class="addCartBtn round u-f-ac" @tap="specShow()"><text>加入购物车</text></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 商品分类 -->
		<!-- #ifdef MP-WEIXIN -->
		<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft" :style="{top: Custom + 'px'}">
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
		<!-- #endif -->
			<view class="cu-item" :class="index == currentIndex ? 'active' : ''" v-for="(item, index) in 8" @tap="TabSelect(index)">
				<view class="cu-pic"><image src="../../static/goods/2.jpg"></image></view>
				<view>新鲜水果</view>
				<view class="bor-bottom round" :class="index == currentIndex ? ' cur' : ''"></view>
			</view>
		</scroll-view>
		<!-- 商品列表 -->
		<goods-container :goods="goods" id="goods-container"></goods-container>
		<!-- 商品规格弹框 -->
		<specs-modal :showt="showm" @close='handalclose'></specs-modal>
	</view>
</template>

<script>
	import Request from '@/common/js/luch-request/index.js'
	import goodsContainer from '@/components/goods-container/goods-container.vue'
	const http = new Request();
	export default {
		components:{
			goodsContainer
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				Custom: this.CustomBar,
				// #endif
				StatusBar: this.StatusBar,
				navTop:0,		//商品列表位置
				navList:[
					{
						name:'优选好货',
						icon: 'icon-yezi'
					},
					{
						name:'次日16点自提',
						icon: 'icon-yezi'
					},
					{
						name:'售后无忧',
						icon: 'icon-yezi'
					}
				],
				tab: [
					{
						id: 1,
						img: 'qgby2.png',
						name: '全国包邮'
					},
					{
						id: 2,
						img: 'qqg2.png',
						name: '全球购'
					},
					{
						id: 3,
						img: 'fntc2.png',
						name: '烽鸟同城'
					},
					{
						id: 4,
						img: 'fpzn2.png',
						name: '扶贫助农'
					},
					{
						id: 5,
						img: 'zjrw2.png',
						name: '湛江人文'
					}
				],
				currentIndex:0,		//当前分类
				scrollLeft:0,
				goods:[
					{
						productId:99,
						productName: '新鲜菠萝密',
						businessId:99,
						mainPicture: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3391316831,2141409865&fm=26&gp=0.jpg',
						buyLimit:4,
						productStock:9,
						skuOneName:'长度',
						count:9
					},
					{
						productId:199,
						productName: '新鲜草莓草莓',
						businessId:99,
						mainPicture: '../../static/goods/3.jpg',
						buyLimit:0,
						productStock:0,
						skuOneName:'长度',
						count:0
					},
					{
						productId:199,
						productName: '新鲜芒果芒果',
						businessId:99,
						mainPicture: '../../static/goods/4.jpg',
						buyLimit:0,
						productStock:0,
						skuOneName:'长度',
						count:0
					},
					{
						productId:199,
						productName: '新鲜芒果芒果',
						businessId:99,
						mainPicture: '../../static/goods/4.jpg',
						buyLimit:0,
						productStock:78,
						skuOneName:'长度',
						count:0
					}
					
				],
				showm: false
			};
		},
		onReady() {
			this.getInfo()
		},
		methods:{
			specShow(){
				this.showm = true
			},
			handalclose(){
				this.showm = false
			},
			login(){
				console.log("12222");
				console.log(this.$store.state.token)
			},
			TabSelect(index){
				this.currentIndex = index
				this.scrollLeft = (index - 1) * 80;
				uni.pageScrollTo({
					scrollTop: this.navTop,
					duration: 0
				});
			},
			// 获取盒子在页面滚动的位置
			getInfo() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.nav').boundingClientRect(data => {
					// #ifdef MP-WEIXIN
					this.navTop = data.top  - uni.upx2px( 20 + 2*this.StatusBar - this.Custom);
					// #endif
					// #ifndef MP-WEIXIN
					this.navTop = data.top  + (uni.upx2px(68) - this.StatusBar);
					// #endif
					console.log(this.navTop)
					}).exec();
			},
		}
	}
</script>

<style lang="scss" scoped>
/* #ifdef APP-PLUS-NVUE */
	@function unit($num) {
		@return $num + 0rpx;
	}
	/* #endif */
	/* #ifndef APP-PLUS-NVUE */
	@function unit($num) {
		@return $num + 0upx;
	}
// 顶部
.Title {
	margin-right: 20rpx;
	color: #ffffff;
}
.search_box {
	margin-right: 30upx;
	width: 450upx;
	height: 64upx;
	background-color: #f5f5f5;
	border-radius: 32upx;
	padding: 0upx 40upx;
	.prompt {
		font-size: 28upx;
		color: #cccccc;
	}
}
.nav-tab {
	position: relative;
	background: linear-gradient(to right,#2ba4f7,#8cd8fe);
	border-bottom-left-radius: 280rpx;
	padding: 0 28rpx;
	z-index: 99;
	color: #fff;
	.top {
		font-size: 26rpx;
		.icon {
			margin-right: 10rpx;
			font-weight: bold;
			font-size: 26rpx;
			color: #fff;
		}
	}

	.choose-post {
		background-color: rgba($color: #fff, $alpha: 0.2);
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		color: #fff;
		.text-cut {
			width: 75%;
		}
		.icon {
			padding: 0 10rpx;
		}
	}
	button.pro-button {
		width: 128upx;
		padding: 9upx 0;
		background-color: rgba($color: #fff, $alpha: 0);
		color: #fff;
		text-align: center;
		position: relative;
		font-size: 28rpx;
		line-height: 1;
	}
}
// 轮播图
.tui-banner-swiper {
	margin: 20rpx 0;
	height: 280upx;
	border-radius: 12rpx;
	overflow: hidden;
	transform: translateY(0);
	z-index: 88;
}
.tui-slide-image {
	width: 100%;
	height: 280upx;
	border-radius: 20upx;
	display: block;
}
// 金刚区
.unicorn-header2 {
	margin: 20upx;
	background-color: #ffffff;
	border-radius: 20upx;
	background-size: 100% 100%;
	-moz-background-size: 100% 100%;
}

.menu {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 24upx;
	color: #555;
	margin-bottom: 20upx;
	padding-top: 20upx;

	.menu-in {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding-top: 15upx;
		.menu-img {
			height: 88upx;
			width: 88upx;
			display: block;
			flex-shrink: 0;
			background-color: #ffffff;
		}

		.menu-name {
			transform: scale(0.9);
			line-height: 50upx;
		}
	}
}
// 分类
.nav {
	position: sticky;
	/* #ifdef H5 APP-NVUE */
	top: unit(88);
	/* #endif */
	background-color: #fff;
	z-index: 9;
	padding-top: 20rpx;
	min-height: 100rpx;
	.cu-item {
		height: 170upx;
		line-height: 44upx;
		font-size: 28rpx;
		text-align: center;
		padding: 0;
		margin: 0 18rpx;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 32rpx;
		}
	}
	.active {
		font-size: 30rpx;
		font-weight: bold;
		color: #f22222;
	}
	.bor-bottom.cur {
		height: 10rpx;
		width: 70%;
		margin: auto;
		margin-top: 6rpx;
		border-radius: 5rpx;
		background-image: linear-gradient(to right, #f22222, #ffe7df);
		animation-name: myfade;
		animation-duration: 0.2s;
		animation-timing-function: linear;
	}
}
@keyframes myfade {
	0% {
		width: 0;
		opacity: 0;
	}

	100% {
		width: 70%;
		opacity: 1;
	}
}
// 秒杀专区
.seckill-box {
	padding: 20rpx 25rpx;
	margin-bottom: 20rpx;
	height: 400rpx;
}
.scroll-box {
	white-space: nowrap;
}
.seckill-item {
	position: relative;
	width: 25%;
	text-align: center;
	display: inline-block;
	overflow: hidden;
	margin-right: 25rpx;
	image {
		height: 150rpx;
		border-radius: 10rpx;
	}
	.price {
		text-align: left;
		align-items: flex-end;
	}
	.text-del {
		text-decoration: line-through;
	}
	.countCont {
		height: 42upx;
		line-height: 42upx;
		margin-top: 13rpx;
	}
	.cont {
		margin-top: 0 !important;
	}
	.round {
		background-color: #f22222;
		color: #ffffff;
		width: 150upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		font-size: 24upx;
	}
	.count {
		bottom: 36rpx;
	}
}
// 加入购物车按钮
.count{
	position: absolute;
	background-color: #F22222;
	color: #fff;
	border-radius: 100%;
	width: 40rpx;
	height: 40rpx;
	right: 3px;
}
.addCartBtn{
	background-color: #F22222;
	color: #ffffff;
	padding: 18rpx 20rpx;
}
</style>
